<template>
	<div class="zc-list-wp"><!-- 月列表容器 -->
		<div dt-arr="dateArr" v-for="(mobj,index) in dtArr"><!-- 每一个月 -->
			<p class="month-title">{{mobj.mTitle}}</p>
			<ul class="week-outer-wp"><!-- 星期列表容器 -->
				<li class="zc-week clearfix" v-for="(warr,windex) in mobj.weekArr" :data-week="index+'*'+windex"><!-- 每一个星期 -->
					<div 
						class="zc-day"
						v-for="(dobj,dindex) in warr"
						:id="dobj.timestamp" 
						:class="{blank:!dobj.date,'curr-day':dobj.timestamp===today}"
						@click="onZcDayClk(dobj)"
					>
						<div class="zc-date" v-if ="dobj.date" >{{ dateOrToday(dobj) }}</div>
						<div class="item_wp" v-if = "pJson[dobj.timestamp]">
							<div class="zc-item" :class="itemO.cls" v-for="itemO in pJson[dobj.timestamp]">
								<span>{{itemO.tip}}</span>
								<span>{{itemO.val}}</span>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				today:-1,//默认值，当前不准确，实例创建完成后会重新赋值，通过该值的变换切换class@zhch20171130
				absToday:-1,//只标识当前天，以当前系统时间为准
				pJson:{},
				ajaxUrl:{
			  		priceDate:'http://106.14.19.71:9090/api/higo/pricedate',
			  	},
			  	ajaxData:{
			  		priceDate:{
			  			higoId:513
			  		}
			  	},
			}
		},
		created() {
			var dt = new Date(),
				y = dt.getFullYear(),
				m = dt.getMonth(),
				d = dt.getDate(),
				initTime = new Date(y,m,d).getTime();
			this.today = this.absToday = initTime;
			this.getPrice();
		},
		props:['dtArr'],
		methods:{
			dateOrToday(obj) {
				return this.absToday ===obj.timestamp?'今天':obj.date;
			},
			onZcDayClk(obj) {
				if(obj.date&&obj.timestamp) {
					this.today = obj.timestamp;
				}
			},
			getPrice() {
		  		var vm = this;
		  		// console.log(vm.ajaxUrl.priceDate);
		  		var currUrl = vm.ajaxUrl.priceDate;
		  		var currDdata = vm.ajaxData.priceDate;
		  		// console.log(vm.ajaxData.priceDate);
		  		vm.$http.get(currUrl,{params:currDdata}/*,{timeout:1200}*/).then(onSuccess,onError);
		  		function onSuccess(res) {
		  			// console.log(res);
		  			var resData = res.data;
		  			var data = [];
		  			var i = 0,len = 0;
		  			if(resData.code===0) {
		  				data = resData.data;
		  				// console.log(data);
		  				len = data.length;
		  				for(;i<len;i++) {
		  					// 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新,需要用vm.$set(obj,key,val)来设置（删除用delete）
							vm.$set(vm.pJson,data[i].date, [
								{tip:'￥',val:data[i].price,cls:'adult-price color-black'},
								{tip:'童价:',val:data[i].childPrice,cls:'children-price color-white'},
								{tip:'库存:',val:data[i].stock,cls:'stock-info color-white'},
							])
		  				}
		  			}else {
		  				console.log(resData.code+'---错误提示');
		  			}
		  		}

		  		function onError(xhr) {
		  			console.log('ajax error');
		  		}
		  	},
		},
		watch:{
			pJson:{
				handler:function(n,o) {
					console.log(n);
					console.log(o);
				},	
				deep:true
			},
		},
	}
</script>
<style>
	.zc-list-wp .zc-week {
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		-webkit-flex-direction:row;
		margin: 0.2rem 0;
	}
	.zc-list-wp .month-title {
		text-align: center;
		margin: 0.5rem;
		font-size: 0.8rem;
		color: #333;
	}
	.zc-list-wp .zc-day {
		width: 14.28%;
		text-align: center;
		font-size: 0.7rem;
		color: #566;
		min-height: 1.8rem;
	    padding: 0.2rem 0.1rem;	
	}
	.zc-list-wp .zc-day.curr-day {
		background-color: #13ae67;
		border-radius: 0.2rem;
		color: #fff;
	}
	.zc-list-wp .color-black {
		color: #000;
	}
	.zc-list-wp .color-white {
		color: #fff;
	}
	.zc-list-wp .zc-day.curr-day .item_wp>div {
		background-color: #13ae67;
    	color: #fff;
	}
	.zc-list-wp .zc-item {
		font-size: 0.5rem;
		border-radius: 0.16rem;
	}
	.zc-list-wp .adult-price {
		background-color: salmon;
	}
	.zc-list-wp .children-price {
		background-color: #343486;
		margin: 0.1rem 0;
	}
	.zc-list-wp .stock-info {
		background-color: #632c2c;
	}

</style>
